<template>
	<view class="content">
		<view class="head">
			<image src="../../static/imgs/phb.png"></image>
		</view>
		<view class="tab">
			<view class="item active">
				浏览榜
			</view>
			<view class="item">
				报名榜
			</view>
		</view>
		
		<view class="list">
			<view class="item">
				<view class="number">1</view>
				<activity3></activity3>
			</view>
			<view class="item">
				<view class="number">2</view>
				<activity3></activity3>
			</view>
			<view class="item">
				<view class="number">3</view>
				<activity3></activity3>
			</view>
			<view class="item">
				<view class="number">4</view>
				<activity3></activity3>
			</view>
			<view class="item">
				<view class="number">5</view>
				<activity3></activity3>
			</view>
		</view>
	</view>
</template>

<script>
	import Activity3 from '../../components/activity3.vue'
	export default {
		name:'TopList',
		data: function() {
			return {
				
			};
		},
		components:{
			Activity3
		}
	}
</script>

<style scoped>
	.head {
		text-align: center;
		padding: 60px 0;
		background: #ff923a;
	}
	.head image{
		width: 550px;
		height: 300px; 
	}
	.tab{
		display: flex;
		line-height: 120px;
		font-size: 30px;
		background: #fff;
	}
	.tab .item{
		flex: 1;
		text-align: center;
	}
	.tab .item.active{
		color: #ff9800;
	}
	.list .item {
		position: relative;
		background: #fff;
		padding: 25px 0 0 0;
		margin: 70px 20px;
		box-shadow: 0 15px 30px 0 rgba(0,0,0,0.2), 0 15px 30px 0 rgba(0,0,0,0.19);
	}
	
	.list .item .number{
		position: absolute;
		left: 0px;
		top:0px;
		width: 40px;
		height: 40px;
		background: #9e9e9e;
		color: #fff;
		font-size: 25px;
		text-align: center;
		line-height: 40px;
	}
	.list .item:nth-child(1) .number {
		background: #f32 !important;
	}
	.list .item:nth-child(2) .number {
		background: #ff9800 !important;
	}
	.list .item:nth-child(3) .number {
		background: #009688 !important;
	}
	
</style>
